<div class="center" style="background: url('/assets/addons/wdsxh/img/phone-bg.png') no-repeat center / contain;">
  <div class="center-header relative" @click="handleEdit(-1)" :class="{selected: -1 == selectedIndex}" :style="{background: jsonData.page.style.titleBackgroundColor}">
    <div class="status">
      <img class="status-camera" src="/assets/addons/wdsxh/img/phone-camera.png">
      <img class="status-bar" :src="'/assets/addons/wdsxh/img/' + jsonData.page.style.titleTextColor + '.png'">
    </div>
    <div class="title" :style="{color: jsonData.page.style.titleTextColor}">{{ jsonData.page.params.title }}</div>
  </div>
  <div class="center-main" v-cloak>
    <div class="main-bg">
      <draggable :list="jsonData.items" class="dragPanel" @update="onDragItemEnd" :options="{animation: 120, filter: '.drag__nomove' }">
        <template v-for="(item, index) in jsonData.items">
          <!-- 在线视频 -->
          <template v-if="item.type == 'videoDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-video" :style="{padding:item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px',background:item.style.background}">
                  <video :src="item.params.videoUrl" :poster="item.params.poster" :autoplay="item.params.autoplay == 1" controls>
                    您的浏览器不支持 video 标签
                  </video>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 图片轮播 -->
          <template v-else-if="item.type == 'carouselDiy'">
            <div class="drag relative" @click="handleEdit(index)" :class="{selected: index === selectedIndex}">
              <div class="diy-carousel" :style="{padding:item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                <el-carousel height="156px" :style="{'border-radius':item.style.borderRadius+'px'}">
                  <el-carousel-item v-for="(carousel, index) in item.data">
                    <img :src="carousel.imgUrl" style="height: 100%;max-width: 100%;object-fit: cover;">
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="btn-edit-operate">
                <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                <div class="btn-tag" style="background-color: #e74c3c;">
                  <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </template>
          <!-- 单图组 -->
          <template v-else-if="item.type == 'imagesDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-imageSingle" :style="{ paddingBottom: item.style.paddingTop + 'px', background: item.style.background}">
                  <div v-for="images in item.data" :style="{padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px 0'}">
                    <img :src="images.imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 导航组 -->
          <template v-else-if="item.type == 'navDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-nav" :style="{background:item.style.background}">
                  <div class="diy-nav-item" v-for="(nav,index) in item.data" :style="{width:item.style.rowsNum === '4'?'25%':(item.style.rowsNum ==='3'?'33.333%':'20%')}">
                    <div class="item-image">
                      <img :src="nav.imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                    </div>
                    <p class="item-text am-text-truncate" :style="{color:nav.color,'margin': '0px'}">
                      {{nav.text}}</p>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 图片魔方 -->
          <template v-else-if="item.type == 'cubeDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-cube" :style="{ background: item.style.background, padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px' }">
                  <div class="data-list" v-if="item.style.layout > -1" :style="{}">
                    <div v-for="cube in item.data" :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px' ,width:item.style.layout == 2?'50%':(item.style.layout ==3?'33.333%':'25%')}">
                      <div class="item-image">
                        <img :src="cube.imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                      </div>
                    </div>
                  </div>
                  <div class="display" v-else>
                    <div class="display-left" :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px' }">
                      <img :src="item.data[0].imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                    </div>
                    <div class="display-right">
                      <div v-if="item.data.length >= 2" class="display-right1" :style="{ padding:item.style.paddingTop+'px '+item.style.paddingLeft +'px' }">
                        <img :src="item.data[1].imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                      </div>
                      <div class="display-right2">
                        <div v-if="item.data.length >= 3" class="left" :style="{ padding:item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px' }">
                          <img :src="item.data[2].imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                        </div>
                        <div v-if="item.data.length >= 4" class="right" :style="{ padding:item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px' }">
                          <img :src="item.data[3].imgUrl" :style="{'border-radius':item.style.borderRadius+'px'}">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 信息卡片 -->
          <template v-else-if="item.type == 'infoCardDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-info-card" :style="{background: item.style.background, padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px' }">
                  <div class="goods-item">
                    <!-- 图片 -->
                    <div class="goods-item_left">
                      <img :src="item.params.image" :style="{'border-radius':item.style.borderRadius+'px'}">
                    </div>
                    <div class="goods-item_right">
                      <div class="goods-item_title">
                        <span>{{ item.params.title }}</span>
                      </div>
                      <div v-if="item.params.content" class="desc-selling_point">
                        <span>{{ item.params.content }}</span>
                      </div>
                      <div class="btn-settlement" :style="{background: item.style.btnBackground, color: item.style.btnColor, borderRadius: item.style.btnBorderRadius + 'px' }">{{ item.params.btnTxt }}</div>
                    </div>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 文字按钮 -->
          <template v-else-if="item.type == 'textButtonDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-text-button" :style="{background:item.style.background,padding: item.style.paddingTop +'px '+item.style.paddingLeft+'px'}">
                  <a class="diy-text-button-item" v-for="(textButton,index) in item.data" :style="{color: textButton.color, fontSize: item.style.fontSize+'px'}">
                    {{textButton.text}}
                  </a>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 文章 -->
          <template v-else-if="item.type == 'articleDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-article" :style="{background: item.style.background, padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px 0' }">
                  <div class="article-item" :style="{ paddingBottom: item.style.paddingTop + 'px ' }" v-for="article in 2" :key="article">
                    <!-- 图片 -->
                    <div class="article-item_left" v-if="item.params.showImg == 'show'">
                      <img src="/assets/addons/wdsxh/img/menus.png" :style="{'border-radius':item.style.borderRadius+'px'}">
                    </div>
                    <div class="article-item_right">
                      <div class="article-item_title">
                        <span>这是文章标题（仅为示例，具体内容根据选择的新闻变化）</span>
                      </div>
                      <div class="article-item_date">
                        <span>{{getCurrentDate()}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 广告组件 -->
          <template v-else-if="item.type == 'adDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-imageSingle" :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                  <div class="item-image">
                    <img src="/assets/addons/wdsxh/img/banner.png">
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 标题单元 -->
          <template v-else-if="item.type == 'titleUnitDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div :style="{background: item.style.background}">
                  <div class="diy-title-unit" :style="{padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px'}">
                    <div class="title-unit-left" :style="{color:item.style.textColor}">
                      <div class="title-unit-left-ming">{{item.params.title1}}</div>
                      <div class="title-unit-left-an">{{item.params.title2}}</div>
                    </div>
                    <div class="title-unit-right" :style="{color: item.style.rightColor}" v-if="item.params.title3">{{item.params.title3}}</div>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 图文按钮 -->
          <template v-else-if="item.type == 'buttonDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-button" :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                  <div class="diy-button-btn" :class="{plain: item.style.plain == 2}" :style="{height:item.style.height + 'px', background:item.style.btnBackground, borderColor: item.style.borderColor, borderWidth: item.style.borderSize + 'px', borderRadius:item.style.borderRadius + 'px'}">
                    <img :src="item.params.imgUrl" v-if="item.params.showImg" :style="{width: item.style.iconSize + 'px',height: item.style.iconSize + 'px'}">
                    <span :style="{fontSize:item.style.fontSize + 'px', color:item.style.color }">{{item.params.text}}</span>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 地图 -->
          <template v-else-if="item.type == 'mapDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                  <div class="diy-map" :style="{ lineHeight: item.style.height + 'px ', height: item.style.height + 'px '}">
                    MAP
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 标题 -->
          <template v-else-if="item.type == 'titleDiy'">
            <div class="drag relative" @click="handleEdit(index)" :class="{selected: index === selectedIndex}">
              <div class="diy-title" :style="{padding: item.style.paddingTop +'px ' + item.style.paddingLeft +'px', background:item.style.background }">
                <div class="diy-title-span" :style="{fontSize: item.style.fontSize + 'px', color: item.style.color}">
                  <i v-if="item.style.fontStyle == 'italic'">{{item.params.title}}</i>
                  <b v-else-if="item.style.fontStyle == 'bold'">{{item.params.title}}</b>
                  <span v-else>{{item.params.title}}</span>
                </div>
                <div class="diy-title-btn" :style="{fontSize: item.style.btnSize + 'px', color: item.style.btnColor}">{{item.params.btnText}}</div>
              </div>
              <div class="btn-edit-operate">
                <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                <div class="btn-tag" style="background-color: #e74c3c;">
                  <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </template>
          <!-- 辅助线条 -->
          <template v-else-if="item.type == 'lineDiy'">
            <div @click="handleEdit(index)" class="drag relative" :class="{selected: index === selectedIndex}">
              <div class="diy-line" :style="{padding: item.style.paddingTop +'px ' + item.style.paddingLeft + 'px', background:item.style.background }">
                <p class="line" :style="{borderTopWidth: item.style.lineHeight +'px',borderTopColor:item.style.lineColor,borderTopStyle: item.style.lineStyle }">
                </p>
              </div>
              <div class="btn-edit-operate">
                <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                <div class="btn-tag" style="background-color: #e74c3c;">
                  <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </template>
          <!-- 广播 -->
          <template v-else-if="item.type == 'noticeDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-notice" :style="{padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                  <div class="notice__icon" v-if="item.params.showImg">
                    <img :style="{width:item.style.iconSize + 'px', height:item.style.iconSize + 'px'}" :src="item.params.icon">
                  </div>
                  <div class="notice__text flex-box am-text-truncate">
                    <span :style="{fontSize:item.style.fontSize + 'px', color: item.style.textColor}">{{item.params.text}}</span>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 辅助空白 -->
          <template v-else-if="item.type == 'blankDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div :style="{height: item.style.height +'px', background:item.style.background }">
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 文本组 -->
          <template v-else-if="item.type == 'textDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div :style="{  background: item.style.background}">
                  <div :style="{padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px'}">
                    <p style="white-space:pre-wrap;margin:0;" :style="{color: item.style.textColor,fontSize:item.style.fontsize+'px',textAlign:item.style.textAlign}">
                      <i v-if="item.style.fontStyle == 'italic'">{{item.style.text}}</i>
                      <b v-else-if="item.style.fontStyle == 'bold'">{{item.style.text}}</b>
                      <span v-else>{{item.style.text}}</span>
                    </p>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 背景音乐 -->
          <template v-else-if="item.type == 'bgmDiy'">
            <div class="diy-bgm drag relative drag__nomove" @click="handleEdit(index)" :class="{selected: index === selectedIndex}" :style="{ right: item.style.right + '%', bottom: item.style.bottom + '%', opacity: item.style.opacity / 100 }">
              <div class="bgm-icon">
                <img :src="item.params.playImgUrl" alt="">
              </div>
              <div class="btn-edit-operate">
                <div class="btn-tag" style="background-color: #e74c3c;">
                  <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </template>
          <!-- 富文本 -->
          <template v-else-if="item.type == 'richTextDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div class="diy-rich-text" :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background,borderRadius:item.style.borderRadius+'px'}" v-html="item.params.content">
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 警告提示 -->
          <template v-else-if="item.type == 'warnDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                  <div class="diy-warn">
                    <el-alert :title="item.params.title" :type="item.params.type" :effect="item.params.effect" :description="item.params.description" :closable="item.params.closable" :show-icon="item.params.showIcon">
                    </el-alert>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #18bc9c;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #e74c3c;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 时间线 -->
          <template v-else-if="item.type == 'timelineDiy'">
            <div @click="handleEdit(index)">
              <div class="drag relative" :class="{selected:index === selectedIndex}">
                <div :style="{ padding: item.style.paddingTop + 'px ' + item.style.paddingLeft + 'px', background: item.style.background}">
                  <div class="diy-timeline">
                    <el-timeline>
                      <el-timeline-item v-for="(activity, index) in item.data" :key="index" :color="activity.color" :hide-timestamp="!activity.hide" :timestamp="activity.time">
                        {{activity.content}}
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </div>
                <div class="btn-edit-operate">
                  <div class="btn-tag" @click.stop="onMoveUp(index)">上移</div>
                  <div class="btn-tag" @click.stop="onMoveDown(index)">下移</div>
                  <div class="btn-tag" style="background-color: #00B272;" @click.stop="onCopyItem(index)">复制</div>
                  <div class="btn-tag" style="background-color: #FF7777;">
                    <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                      <div slot="reference">删除</div>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 悬浮按钮 -->
          <template v-else-if="item.type == 'floatDiy'">
            <div class="diy-float drag relative drag__nomove" @click="handleEdit(index)" :class="{selected: index === selectedIndex}" :style="{ right: item.style.right + '%', bottom: item.style.bottom + '%', opacity: item.style.opacity / 100 }">
              <div class="float-icon">
                <img :src="item.params.image" alt="">
              </div>
              <div class="btn-edit-operate">
                <div class="btn-tag" style="background-color: #e74c3c;">
                  <el-popconfirm title="确定删除该组件吗？" @confirm="onDeleleItem(index)">
                    <div slot="reference">删除</div>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </template>
        </template>
      </draggable>
    </div>
  </div>
  <div class="center-footer">
    <div class="footer-line"></div>
  </div>
</div>